<template>
  <!--  default-active默认选中的位置
  mode设置顶栏(horizontal横向)还是侧栏(默认)
  @select选择事件
  -->
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
  >
    <el-menu-item index="1">Processing Center</el-menu-item>
    <el-sub-menu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="3" disabled>Info</el-menu-item>
    <el-menu-item index="4">Orders</el-menu-item>
  </el-menu>
  <div class="h-6" />

  <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
  >
    <el-menu-item index="1">Processing Center</el-menu-item>
    <el-sub-menu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="3" >Info</el-menu-item>
    <el-menu-item index="4">Orders</el-menu-item>
  </el-menu>
  <h1>魏蜀吴</h1>
  <el-menu mode="horizontal" :default-active="activeIndex">
    <el-menu-item index="1">魏国</el-menu-item>
    <el-sub-menu index="2">
      <template #title>蜀国</template>
      <el-menu-item index="2-1">刘备</el-menu-item>
      <el-menu-item index="2-2">孙尚香</el-menu-item>
      <el-menu-item index="2-3">刘禅</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="3">吴国</el-menu-item>
  </el-menu>
  <h1>侧栏</h1>
  <div style="width: 200px">
    <el-menu default-active="2">
      <el-sub-menu index="1">
        <template #title>
          <el-icon><Edit/></el-icon><span>魏国</span>
        </template>
        <el-menu-item index="1-1">曹操</el-menu-item>
        <el-menu-item index="1-2">曹植</el-menu-item>
        <el-menu-item index="1-3">曹丕</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="2">
        <el-icon><Location/></el-icon><span>蜀国</span>
      </el-menu-item>
      <el-menu-item index="3">
        <el-icon><Camera/></el-icon><span>吴国</span>
      </el-menu-item>
    </el-menu>
  </div>

</template>

<script  setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key, keyPath) => {
  /*key 代表的是菜单项的index值*/
  console.log(key, keyPath)
}
</script>
